<template>
  <div class="side-menu">
    <div class="menu-title">
      <span>监测评估预警</span>
    </div>
    <div class="menu-tree">
      <el-menu class="el-menu-vertical-demo" background-color="#001528" text-color="#fff" active-text-color="#fff">
        <template v-for="(item,i) in menuList">
          <el-submenu :index="item.id" v-if="item.children.length>0">
            <template slot="title">
              <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(option,j) in item.children" :key="j" :index="option.id" @click.native="goPath(item)">{{option.label}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else :index="item.id" @click.native="goPath(item)">{{item.label}}</el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        {
          id: 1,
          label: '概览',
          children: [],
          path: '/概览',
        },
        {
          id: 2,
          label: '监测预警',
          children: [],
          path: '/监测预警',
        },
        {
          id: 3,
          label: '实施评估',
          path: '/实施评估',
          children: [
            {
              id: 4,
              label: '地区评估',
              path: '/地区评估',
            },
            {
              id: 5,
              label: '专题评估',
              path: '/专题评估',
            },
            {
              id: 6,
              label: '评估报告',
              path: '/评估报告',
            },
          ],
        },
        {
          id: 7,
          label: '监控配置',
          children: [],
          path: '/监控配置',
        },
      ],
    }
  },
  methods: {
    goPath (data) {
      this.$router.push(data.path)
    }
  },
}
</script>

<style lang="less">
.side-menu {
  width: 100%;
  height: 100%;
  .menu-title {
    width: 100%;
    height: 80px;
    line-height: 80px;
    span {
      width: 200px;
      height: 40px;
      display: inline-block;
      line-height: 40px;
      border-radius: 4px;
      background-color: #75808b;
      color: #fff;
      text-align: center;
      margin-left: 40px;
    }
  }
  .menu-tree {
    .el-menu-item.is-active {
      background-image: linear-gradient(to right, #3a6ae9, #223666);
    }
  }
}
</style>
